内容投影

概述

内容投影（Content Projection）是 Angular 中一种强大的机制，允许你将一个组件的模板内容插入到另一个组件的模板中。这种技术在构建可重用组件时非常有用，尤其是在你需要动态地传递内容给组件时。

理论解释

什么是内容投影？

内容投影允许你将一个组件的模板内容传递给另一个组件，并在目标组件中渲染这些内容。这类似于 HTML 中的 <slot> 元素，但在 Angular 中，我们使用 <ng-content> 标签来实现这一功能。

为什么使用内容投影？

• 可重用性：通过内容投影，你可以创建更加灵活和可重用的组件。
• 动态内容：你可以在运行时动态地传递内容给组件，而不需要在组件内部硬编码内容。
• 组件组合：内容投影使得组件之间的组合更加容易，你可以将多个组件的内容组合在一起。

代码示例

基本内容投影

首先，我们创建一个简单的组件 CardComponent，它将使用内容投影来显示传递给它的内容。

// card.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-card',
  template: `
    <div class="card">
      <div class="card-header">
        <ng-content select="[card-header]"></ng-content>
      </div>
      <div class="card-body">
        <ng-content select="[card-body]"></ng-content>
      </div>
    </div>
  `,
  styles: [`
    .card {
      border: 1px solid #ccc;
      border-radius: 4px;
      padding: 10px;
      margin: 10px;
    }
    .card-header {
      background-color: #f0f0f0;
      padding: 5px;
      border-bottom: 1px solid #ccc;
    }
    .card-body {
      padding: 10px;
    }
  `]
})
export class CardComponent {}

在上面的代码中，我们使用了两个 <ng-content> 标签，分别用于选择带有 card-header 和 card-body 属性的内容。

使用内容投影

接下来，我们在另一个组件中使用 CardComponent，并传递内容给它。

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-card>
      <div card-header>
        This is the header
      </div>
      <div card-body>
        This is the body content.
      </div>
    </app-card>
  `
})
export class AppComponent {}

在这个例子中，我们通过 card-header 和 card-body 属性将内容传递给 CardComponent，并在 CardComponent 中渲染这些内容。

实践练习

练习 1：创建一个模态框组件

1. 创建一个 ModalComponent，它包含一个标题和一个内容区域。
2. 使用 <ng-content> 标签来接收标题和内容。
3. 在 AppComponent 中使用 ModalComponent，并传递标题和内容给它。

练习 2：创建一个可重用的列表组件

1. 创建一个 ListComponent，它包含一个列表头和一个列表项区域。
2. 使用 <ng-content> 标签来接收列表头和列表项。
3. 在 AppComponent 中使用 ListComponent，并传递列表头和列表项给它。

总结

内容投影是 Angular 中一个非常强大的特性，它允许你创建更加灵活和可重用的组件。通过使用 <ng-content> 标签，你可以轻松地将内容传递给组件，并在组件中动态地渲染这些内容。希望这篇教程能帮助你更好地理解和使用内容投影。